<template>
    <div>
        <van-nav-bar title="分类" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-tabs @click="onClick()" v-model="active">
            <van-tab v-for="item in istetle.navData" :title="item.name">
                <div class="box">
                    <h3>{{ item.name }}</h3>
                    <p>{{ item.front_desc }}</p>
                </div>
            </van-tab>
        </van-tabs>

        <van-row type="flex">
            <van-col span="12" v-for="item in this.message.data" class="box2">
                <van-image width="10rem" height="10rem" fit="contain" :src="item.list_pic_url" />
                <p>{{ item.name }}</p>
                <span>¥{{ item.retail_price }}</span>
            </van-col>
        </van-row>

        <button @click="aaa"></button>
        <br>
        <br>
        <br>
        <br>
    </div>
</template>

<script>
import { classify } from "@/api/category/category";
export default {
    name: 'BusinessClassifythen',

    data() {
        return {
            message: JSON.parse(localStorage.getItem('deliver')),//内容

            active: 0,
            istetle: JSON.parse(localStorage.getItem('Tetles')),//导航

            structure: []
        };
    },

    mounted() {

    },

    methods: {
        aaa() {
            console.log(this.message.data);
            console.log(this.istetle);
        },
        async fn(id) {
            const { data: res } = await classify(id)
            this.message = res
            console.log(this.message.data);
        },
        //切换按键
        onClick() {
            this.istetle.navData.forEach((element, index) => {
                if (this.active == index) {
                    console.log(element.id);
                    this.fn(element.id)
                }
            });
            console.log(this.message);
        },


        //返回按键
        onClickLeft() {
            this.$router.replace('/classify')
        }
    },
};
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}

.box {
    margin: 10px auto;
    width: 90vw;
    background-color: #f9f4e5;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 10px 0px;
}

.box h3,
.box p {
    margin: 10px 0px;
}

.box h3 {
    font-size: 16px;
    font-weight: 500;
}

.box p,
.box2 p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
    color: #666;
}

.box2 span {
    color: brown;
    font-size: 14px;
}
</style>